// @ts-ignore;
import React, { useState, useEffect } from 'react';
// @ts-ignore;
import { Button, Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui';
// @ts-ignore;
import { ArrowLeft, Info } from 'lucide-react';

export default function Gallery(props) {
  const {
    $w
  } = props;
  const [selectedArtwork, setSelectedArtwork] = useState(null);
  const [artworks, setArtworks] = useState([]);
  const [loading, setLoading] = useState(true);

  // 从数据模型获取当前用户的作品
  useEffect(() => {
    const fetchArtworks = async () => {
      try {
        const result = await $w.cloud.callDataSource({
          dataSourceName: 'artwork',
          methodName: 'wedaGetRecordsV2',
          params: {
            filter: {
              where: {
                user_id: {
                  $eq: $w.auth.currentUser?.userId || ''
                },
                is_generating: {
                  $eq: false
                }
              }
            },
            select: {
              $master: true
            },
            orderBy: [{
              created: 'desc'
            }]
          }
        });
        setArtworks(result.records || []);
      } catch (error) {
        console.error('获取作品失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchArtworks();
  }, [$w.auth.currentUser?.userId, $w.cloud]);
  const handleBack = () => {
    $w.utils.navigateBack();
  };
  return <div className="relative h-screen bg-gray-900 overflow-hidden">
      {/* 3D展厅场景 */}
      <div className="absolute inset-0 flex items-center justify-center">
        {loading ? <div className="text-white">加载中...</div> : artworks.length === 0 ? <div className="text-white text-center">
            <p className="text-xl">您还没有创作任何作品</p>
            <Button onClick={() => $w.utils.navigateTo({
          pageId: 'studio'
        })} className="mt-4 bg-purple-600 hover:bg-purple-700">
              去创作
            </Button>
          </div> : <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-6xl mx-auto p-4">
            {artworks.map(artwork => <div key={artwork._id} onClick={() => setSelectedArtwork(artwork)} className="relative group cursor-pointer transition-all duration-300 hover:scale-105">
                <div className="absolute inset-0 bg-purple-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity"></div>
                <img src={artwork.image} alt={artwork.title} className="relative z-10 w-full h-64 object-cover rounded-xl shadow-lg border-2 border-white border-opacity-20" />
                <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-xl z-20">
                  <h3 className="font-medium">{artwork.title}</h3>
                  <p className="text-xs opacity-80">{artwork.style_name}</p>
                </div>
              </div>)}
          </div>}
      </div>

      {/* 返回按钮 */}
      <button onClick={handleBack} className="absolute top-6 left-6 bg-white bg-opacity-90 hover:bg-opacity-100 p-3 rounded-full shadow-lg transition-all">
        <ArrowLeft className="text-gray-800" />
      </button>

      {/* 创作解析卡片 */}
      {selectedArtwork && <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-md bg-white bg-opacity-90 backdrop-blur-sm">
            <CardHeader>
              <CardTitle>{selectedArtwork.title}</CardTitle>
              <CardDescription>{selectedArtwork.description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <img src={selectedArtwork.image} alt={selectedArtwork.title} className="w-full rounded-lg shadow" />
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-gray-500">艺术风格</p>
                  <p>{selectedArtwork.style_name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">创作日期</p>
                  <p>{new Date(selectedArtwork.created).toLocaleDateString()}</p>
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">风格参数</p>
                <p>{selectedArtwork.style_params}</p>
              </div>
              <Button onClick={() => setSelectedArtwork(null)} className="w-full mt-4 bg-purple-600 hover:bg-purple-700">
                关闭
              </Button>
            </CardContent>
          </Card>
        </div>}
    </div>;
}